import 'package:bruno/bruno.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getwidget/getwidget.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/route/route.dart';
import 'package:meal/ui/pay_pwd.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';
import 'package:meal/utils/tools.dart';

///
/// 添加充值
///
class RechargeAdd extends StatefulWidget {
  const RechargeAdd({Key? key}) : super(key: key);

  @override
  State<RechargeAdd> createState() => _RechargeAddState();
}

class _RechargeAddState extends State<RechargeAdd> {
  String money = '', pwd = '';

  List<BrnMultiDataPickerEntity> data = [];

  String name = '人民币';

  List<_RechargeType> types = [];

  int groupValue = 0;

  @override
  void initState() {
    super.initState();
    data.add(BrnMultiDataPickerEntity(text: '人民币', value: 1));
    data.add(BrnMultiDataPickerEntity(text: '美元', value: 2));
    data.add(BrnMultiDataPickerEntity(text: '欧元', value: 3));
    data.add(BrnMultiDataPickerEntity(text: '卢布', value: 4));
    types.add(_RechargeType(
        url: 'https://cdn7.axureshop.com/demo/1525603/images/余额充值/u2215.svg', payName: '微信支付'));
    types.add(_RechargeType(
        url: 'https://cdn7.axureshop.com/demo/1525603/images/余额充值/u2216.svg', payName: '支付宝'));
    types.add(_RechargeType(
        url: 'https://cdn7.axureshop.com/demo/1525603/images/余额充值/u2217.svg',
        payName: 'Visa/MasterCard'));
    types.add(_RechargeType(
        url: 'https://cdn7.axureshop.com/demo/1525603/images/余额充值/u2221.svg', payName: 'Paypal'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ToolsUtils.getDefaultBackgroundColor(),
      appBar: ToolsUtils.getDefaultBrnAppBar('充值',
          actions: ToolsUtils.actions('充值记录', pressed: () {
            Get.toNamed(RouteGet.financeRechargeRecord);
          })),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(Sizes.default20),
        child: Column(
          children: [
            Container(
              padding: const EdgeInsets.symmetric(
                  horizontal: Sizes.default15, vertical: Sizes.default10),
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(Sizes.default10)),
              child: ListBody(
                children: [
                  Container(
                    height: Sizes.default40,
                    alignment: Alignment.centerLeft,
                    child: Text(
                      '充值金额',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color333),
                    ),
                  ),
                  Container(
                    height: Sizes.default50,
                    alignment: Alignment.centerLeft,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '￥',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color515, fontSize: Sizes.default28),
                        ),
                        Expanded(
                            child: Container(
                          padding: const EdgeInsets.only(left: Sizes.default10),
                          child: TextField(
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color000, fontSize: Sizes.default20),
                            decoration: InputDecoration(
                                border: const OutlineInputBorder(
                                  borderSide: BorderSide.none,
                                ),
                                isCollapsed: true,
                                filled: true,
                                fillColor: Colors.transparent,
                                contentPadding: const EdgeInsets.symmetric(
                                    horizontal: Sizes.default10, vertical: Sizes.default10),
                                constraints: const BoxConstraints(minHeight: Sizes.default40),
                                hintText: '请输入金额',
                                hintStyle: StylesUtils.customTextStyle(
                                    fontSize: Sizes.default16, color: ColorsUtils.colorCcc)),
                            keyboardType: TextInputType.number,
                            onChanged: (String content) {
                              setState(() {
                                money = content;
                              });
                            },
                          ),
                        )),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: Sizes.default20),
              padding: const EdgeInsets.symmetric(
                  horizontal: Sizes.default15, vertical: Sizes.default10),
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(Sizes.default10)),
              child: ListBody(
                children: [
                  SizedBox(
                    height: Sizes.default50,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '支付币种',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color333, fontSize: Sizes.default15),
                        ),
                        TextButton(
                            onPressed: () {
                              ToolsUtils.openDataPicker(context, data, (List selectedIndexList) {
                                setState(() {
                                  int index = selectedIndexList[0];
                                  name = data[index].text;
                                });
                              });
                            },
                            child: Text.rich(TextSpan(
                                text: name,
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color797),
                                children: [
                                  WidgetSpan(
                                      child: BrunoTools.getAssetSizeImage(BrnAsset.iconRightArrow,
                                          Sizes.default16, Sizes.default16),
                                      alignment: PlaceholderAlignment.middle)
                                ])))
                      ],
                    ),
                  ),
                  SizedBox(
                    height: Sizes.default50,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '汇率',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color333, fontSize: Sizes.default15),
                        ),
                        Text(
                          '1CNY=8.2199PHP',
                          style: StylesUtils.customTextStyle(color: ColorsUtils.color797),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: Sizes.default20),
              padding: const EdgeInsets.symmetric(
                  horizontal: Sizes.default15, vertical: Sizes.default10),
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(Sizes.default10)),
              child: ListBody(
                children: [
                  Container(
                    height: Sizes.default50,
                    alignment: Alignment.centerLeft,
                    child: Text(
                      '支付方式',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color333),
                    ),
                  ),
                  ...types
                      .asMap()
                      .map((key, item) => MapEntry(
                          key,
                          Container(
                            height: Sizes.default50,
                            alignment: Alignment.centerLeft,
                            child: Wrap(
                              spacing: Sizes.default20,
                              children: [
                                Container(
                                    alignment: Alignment.center,
                                    constraints: BoxConstraints.loose(const Size.square(25)),
                                    decoration: BoxDecoration(
                                        color: Colors.white,
                                        borderRadius: BorderRadius.circular(Sizes.default13),
                                        border: groupValue != key ? Border.all(
                                          color: ColorsUtils.parseColorFromHexString(
                                              ColorsUtils.color999),
                                        ) : null
                                    ),
                                    child: InkWell(
                                      onTap: () {
                                        setState(() {
                                          groupValue = key;
                                        });
                                      },
                                      child: key == groupValue
                                          ? Icon(Icons.check_circle,
                                              size: 30,
                                              color: ColorsUtils.parseColorFromHexString(
                                                  ColorsUtils.colorFf0))
                                          : Container(),
                                    )),
                                ToolsUtils.getUrlSvg(item.url, width: 30, height: 25),
                                Text(item.payName,
                                    style: StylesUtils.customTextStyle(
                                        fontSize: Sizes.default15, color: ColorsUtils.color333))
                              ],
                            ),
                          )))
                      .values
                      .toList()
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: Sizes.default30),
              height: Sizes.default50,
              child: FractionallySizedBox(
                widthFactor: 1,
                heightFactor: 0.9,
                child: GFButton(
                    onPressed: onSubmit,
                    text: '去支付',
                    textStyle: StylesUtils.customTextStyle(fontSize: Sizes.default16),
                    shape: GFButtonShape.pills,
                    type: GFButtonType.solid,
                    size: GFSize.LARGE,
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFf6)),
              ),
            )
          ],
        ),
      ),
    );
  }

  void onSubmit() {
    showDialog(
        context: context,
        barrierDismissible: true,
        builder: (_) {
          return StatefulBuilder(builder: (BuildContext context, setState) {
            return PayPwd(
                pwd: pwd,
                callback: (String value) {
                  setState(() {
                    if (value.length == 6) {
                      /// 跳转
                      Future.delayed(const Duration(milliseconds: 50), () {
                        Navigator.of(context).pop();
                        pwd = '';
                        Get.toNamed(RouteGet.financeRechargeResult);
                      });
                    } else {
                      pwd = value;
                    }
                  });
                });
          });
        });
  }
}

class _RechargeType {
  String url;
  String payName;

  _RechargeType({required this.url, required this.payName});
}
